﻿<template>
	<div class="flowSystemSGJK-container">
		<el-dialog v-model="isShowDialog" :title="props.title" :width="800" draggable="" append-to-body="true">
			<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="工程名稱" prop="project_name">
							<el-input disabled v-model="ruleForm.project_name" placeholder="请输入工程名稱" maxlength="1000"
								show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="承攬廠商名稱" prop="supplier_name">
							<el-input disabled v-model="ruleForm.supplier_name" placeholder="请输入承攬廠商名稱" maxlength="255"
								show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="详细内容" prop="content">
							<el-input v-model="ruleForm.content" placeholder="请输入详细内容" type="textarea" show-word-limit
								clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="工作进度" prop="progress">
							<el-input v-model="ruleForm.progress" placeholder="请输入工作进度" type="textarea" show-word-limit
								clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="待改善项目" prop="changeProject">
							<el-input v-model="ruleForm.changeProject" placeholder="请输入待改善项目" type="textarea"
								show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
						<el-form-item label="施工人员入厂日期" prop="enterTime">
								<el-date-picker  v-model="ruleForm.enterTime" type="date" placeholder="请选择施工人员的入厂时期" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :span="24" class="mb20">
						<el-form-item label="照片" prop="images">
							<el-upload class="upload-more" drag v-model:file-list="imagesArrs" :auto-upload="true"
								multiple :limit="4" ref="uploadImagesRef" :http-request="uploadImagesHandle"
								:before-upload="handleBeforeUploadImages" :on-remove="handleRemoveImages"
								:on-exceed="handleExceedImages">
								<el-icon class="el-icon--upload"><upload-filled /></el-icon>
								<div class="el-upload__text">
									<em>拖拽或点击上传</em>
								</div>
								<template #tip>
									<div class="el-upload__tip">
										单个文件的大小不能超过3MB
									</div>
								</template>
							</el-upload>
						</el-form-item>
					</el-col>
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">打 印</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
	:deep(.el-select),
	:deep(.el-input-number) {
		width: 100%;
	}
</style>
<script lang="ts" setup>
	import { ref, onMounted, nextTick } from "vue";
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import _ from 'lodash';
	import { genFileId } from 'element-plus';
	import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
	import { Plus, UploadFilled } from "@element-plus/icons-vue";
	import { UploadRequestOptions } from "element-plus";
	import { uploadImages } from '/@/api/main/flowSystemSGJK';
	import { addFlowSystemSGJK, updateFlowSystemSGJK } from "/@/api/main/flowSystemSGJK";


	//父级传递来的参数
	var props = defineProps({
		title: {
			type: String,
			default: "",
		},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["printJKLog"]);
	const ruleFormRef = ref();
	const uploadImagesRef = ref();
	const imagesArrs = ref([]);
	const isShowDialog = ref(false);
	const ruleForm = ref<any>({});
	const timer = ref<any>();
	let mianPageData = ref<any>();
	//自行添加其他规则
	const rules = ref<FormRules>({
	});

	// 打开弹窗
	const openDialog = (row : any, notParentCall = false) => {
		mianPageData.value = row
		timer.value = new Date().getTime();
		ruleForm.value.$TemplateFieldDisabled = notParentCall;
		if (row != null && notParentCall == false) {
			ruleForm.value = JSON.parse(JSON.stringify(row));
		}
		else {
			//作為新增明細時候的組件使用
			if (row.id != undefined && notParentCall == true) {
				ruleForm.value.$TemplateField = row.id;
			}
		}
		isShowDialog.value = true;
		imagesArrs.value = ruleForm.value.images != null && ruleForm.value.images != undefined ? JSON.parse(ruleForm.value.images) : [];
		//新增的时候需要给集合字段赋值为： []
		if (row.id == undefined) {
		}
	};

	// 关闭弹窗
	const closeDialog = (values) => {
		emit("printJKLog", values);
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
	};

	// 提交
	const submit = _.throttle(async () => {
		ruleFormRef.value.validate(async (isValid : boolean, fields ?: any) => {
			if (isValid) {
				let values = ruleForm.value;
				if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
					await addFlowSystemSGJK(values);
				} else {
					await updateFlowSystemSGJK(values);
				}
				closeDialog(values);
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
	}, 2000);






	const uploadImagesHandle = async (options : UploadRequestOptions) => {
		const res = await uploadImages(options);
		imagesArrs.value.forEach(r => {
			if (r.uid == options.file.uid)
				r.url = res.data.result?.url;
		});
		ruleForm.value.images = JSON.stringify(imagesArrs.value.map(r => ({
			name: r.name,
			url: r.url
		})));
	};
	const handleRemoveImages : UploadProps['onRemove'] = (removeFile, uploadFiles) => {
		imagesArrs.value = imagesArrs.value.filter(r => r.name != removeFile.name);
		ruleForm.value.images = JSON.stringify(imagesArrs.value.map(r => ({
			name: r.name,
			url: r.url
		})));
	};
	const handleExceedImages : UploadProps['onExceed'] = (files) => {
		if(files.length>4){
			ElMessage({
				message: `最多上传4张图片`,
				type: "error",
			});
			return ;  // 阻止文件上传
		}
		
		nextTick(() => {
			uploadImagesRef.value!.clearFiles();
			files.forEach(file => {
				file.uid = genFileId();
				uploadImagesRef.value!.handleStart(file);
			});
			uploadImagesRef.value!.submit();
		});
	};
	const handleBeforeUploadImages = (file) => {
		const maxSize = 3 * 1024 * 1024;  // 设置文件大小限制为3MB
		if (file.size > maxSize) {
			ElMessage({
				message: `${file.name}-文件大小超过了${maxSize / (1024 * 1024)}MB的限制`,
				type: "error",
			});
			return false;  // 阻止文件上传
		}
		return true;  // 允许文件上传
	}



	const checkNeedDisable = (previousColumn) => {
		if (typeof previousColumn !== 'undefined' && previousColumn != null && previousColumn !== '' && previousColumn > 0) {
			return false;
		}
		return true;
	}

	// 页面加载时
	onMounted(async () => {
	});

	const commentClick = async (row : any) => {
		timer.value = new Date().getTime();
		//ruleForm.value.standardId = row.id;
		isShowDialog.value = true;
	};

	//将属性或者函数暴露给父组件
	defineExpose({ openDialog, commentClick });
</script>